<template>
  <!-- 技术概况 -->
  <div class="technologyBody">
    <v-layout>
      <!-- 企业主要技术方向 -->
      <v-flex class="vflex right technology" xs7>
        <v-card class="vcard">
          <v-card-title class="vcard-title"
            ><i></i>{{ $t("assessment.MainTechnology") }}</v-card-title
          >
          <div id="chartTechOne" style="width: 100%; height: 360px"></div>
        </v-card>
      </v-flex>
      <!-- 竞品企业匹配 -->
      <v-flex class="vflex Ranking" xs5>
        <v-card class="vcard">
          <v-card-title class="vcard-title"
            ><i></i>{{ $t("assessment.CompetingGoodsEnterprises") }}
            <el-tooltip
              class="item"
              effect="dark"
              content="评估参考：业务收入、技术方向、产品、经营范围、技术竞争等"
              placement="right"
            >
              <span class="tip-icon el-icon-warning-outline"></span>
            </el-tooltip>
          </v-card-title>
          <el-table
            :data="competingGoodsData"
            :default-sort="{ prop: 'similarity', order: 'descending' }"
            :row-class-name="rankingRowClassName"
            style="width: 100%"
            height="300"
          >
            <!-- 序号 -->
            <el-table-column
              type="index"
              :label="$t('assessment.SN')"
              width="60"
              align="center"
            >
            </el-table-column>
            <!-- 公司名称 -->
            <el-table-column
              prop="companyName"
              :label="$t('assessment.CompanyName')"
            >
              <template slot-scope="scope">
                <p
                  class="company-name"
                  @click="handleEnterComp(scope.row.companyName)"
                  :title="scope.row.companyName"
                  style="cursor: pointer"
                >
                  {{ scope.row.companyName }}
                </p>
              </template>
            </el-table-column>
            <!-- 相似度 -->
            <el-table-column
              prop="similarity"
              :label="$t('assessment.Similarity')"
              align="center"
              sortable
              width="90"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.companyName !== companyName">
                  <span
                    v-if="scope.row.companySimLevel === '高'"
                    class="highcolor"
                    >{{ scope.row.companySimLevel }}</span
                  >
                  <span
                    v-else-if="scope.row.companySimLevel === '极高'"
                    class="highcolor2"
                    >{{ scope.row.companySimLevel }}</span
                  >
                  <span v-else>{{ scope.row.companySimLevel }}</span>
                  <template v-if="scope.row.companySimInfoStr">
                    <el-tooltip effect="dark" placement="right">
                      <div
                        slot="content"
                        v-html="scope.row.companySimInfoStr"
                        class="tooltip-content"
                      ></div>
                      <span class="tip-icon2 el-icon-warning-outline"></span>
                    </el-tooltip>
                  </template>
                </div>
              </template>
            </el-table-column>
            <!-- 技术评分 -->
            <el-table-column
              prop="companyScore"
              :label="$t('assessment.TechnicalGrade')"
              align="center"
              sortable
              width="100"
            >
              <template slot-scope="scope">{{
                scope.row.companyScoreLevel
              }}</template>
            </el-table-column>
            <el-table-column
              :label="$t('assessment.Operation')"
              align="center"
              width="77"
            >
              <template slot-scope="scope">
                <v-btn
                  v-if="scope.row.companyName !== companyName"
                  class="vbtn"
                  @click="goTechComparison(scope)"
                  >{{ $t("assessment.Comparison") }}</v-btn
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- <v-btn class="right-icon" @click="showConclusion(0)">{{$t('assessment.Conclusion')}}</v-btn>
          <el-tabs v-model="industryTabs" stretch class="industry-vtabs">
            <el-tab-pane :label="$t('assessment.cnSimilarity')">
              <IndustryTable :dataType="cnDataType"/>
            </el-tab-pane>
            <el-tab-pane :label="$t('assessment.globalSimilarity')">
              <IndustryTable :dataType="enDataType"/>
            </el-tab-pane>
          </el-tabs> -->
        </v-card>
      </v-flex>
    </v-layout>

    <v-layout>
      <!-- 企业专利概况 -->
      <v-flex class="vflex right" xs5>
        <v-card class="vcard">
          <v-card-title class="vcard-title"
            ><i></i>{{ $t("assessment.PatentOverview") }}</v-card-title
          >
          <v-btn class="right-icon" @click="showConclusion(1)">{{
            $t("assessment.Conclusion")
          }}</v-btn>
          <!-- 拥有专利数 -->
          <p class="info2 clearfix">
            <span
              ><i>{{ $t("assessment.PatentOwned") }}：</i
              >{{ patentCount.patentNum }}{{ $t("assessment.Pcs") }}</span
            >
          </p>
          <p class="info3 clearfix">
            <span
              >{{ $t("assessment.IndependentApplication") }}：{{
                patentCount.applyNum
              }}{{ $t("assessment.Pcs") }}</span
            >
            <span
              >{{ $t("assessment.PatentPurchase") }}：{{ patentCount.buyNum
              }}{{ $t("assessment.Pcs") }}</span
            >
            <span
              >{{ $t("assessment.InvalidPatent") }}：{{ patentCount.invalidNum
              }}{{ $t("assessment.Pcs") }}</span
            >
            <span
              >{{ $t("assessment.LicensedPatent") }}：{{ patentCount.licenseNum
              }}{{ $t("assessment.Pcs") }}</span
            >
            <span
              >{{ $t("assessment.RollOut") }}：{{ patentCount.outNum
              }}{{ $t("assessment.Pcs") }}</span
            >
          </p>
          <!-- 拥有论文数 -->
          <p class="info2 clearfix">
            <span
              ><i>论文拥有量：</i
              >{{ ( patentCount2["paper"] && patentCount2["paper"]["all"] )  || 0
              }}{{ $t("assessment.Pcs") }}</span
            >
          </p>
          <p class="info3 clearfix">
            <span
              >期刊论文：{{
                ( patentCount2["paper"] && patentCount2["paper"]["all"] ) ||
                  0
              }} 件</span
            >
          </p>
          <!-- 标准拥有数 -->
          <p class="info2 clearfix">
            <span
              ><i>标准拥有量：</i
              >{{ ( patentCount2["biaozhun"] && patentCount2["biaozhun"]["all"] )  || 0
              }}{{ $t("assessment.Pcs") }}</span
            >
          </p>
          <p class="info3 clearfix">
            <span
              >现行：{{
                (patentCount2["biaozhun"]["现行"] &&
                  patentCount2["biaozhun"]["现行"].doc_count) || 
                  0
              }} 件</span
            >
            <span
              >即将实施：{{
                (patentCount2["biaozhun"]["即将实施"] &&
                  patentCount2["biaozhun"]["即将实施"].doc_count) ||
                  0
              }} 件</span
            >
            <span
              >废止：{{
                (patentCount2["biaozhun"]["废止"] &&
                  patentCount2["biaozhun"]["废止"].doc_count) ||
                  0
              }} 件</span
            >
          </p>
          <!-- 成果拥有量 -->
          <p class="info2 clearfix">
            <span
              ><i
                >成果拥有量：{{
                 ( patentCount2["chengguo"] && patentCount2["chengguo"]["all"] ) || 0
                }}</i
              > 件</span
            >
          </p>
          <p class="info3 clearfix">
            <span
              >成熟应用阶段：{{
                (patentCount2["chengguo"]["成熟应用阶段"] &&
                  patentCount2["chengguo"]["成熟应用阶段"].doc_count) ||
                  0
              }} 件</span
            >
            <span
              >初期阶段：{{
                (patentCount2["chengguo"]["初期阶段"] &&
                  patentCount2["chengguo"]["初期阶段"].doc_count) ||
                  0
              }} 件</span
            >
            <span
              >中期阶段：{{
                (patentCount2["chengguo"]["中期阶段"] &&
                  patentCount2["chengguo"]["中期阶段"].doc_count) ||
                  0
              }} 件</span
            >
          </p>
        </v-card>
      </v-flex>
      <!-- 行业技术水平 -->
      <v-flex class="vflex" xs7>
        <v-card class="vcard">
          <v-card-title class="vcard-title"
            ><i></i>{{ $t("assessment.technicalLevel") }}</v-card-title
          >
          <div id="chartTechTwo" style="width: 100%; height: 400px"></div>
        </v-card>
      </v-flex>
    </v-layout>
    <v-layout>
      <!-- 企业专利明细评分 -->
      <v-flex class="vflex right" xs6>
        <v-card>
          <v-card-title class="vcard-title"
            ><i></i>{{ $t("assessment.technologyScore") }}</v-card-title
          >
          <v-layout>
            <v-flex xs12>
              <ul class="range clearfix">
                <li
                  v-for="(item, index) in intervalArr"
                  :key="index"
                  @click="queryInterval(item.value)"
                  :class="{ 'range-active': activeVal === item.value }"
                >
                  {{ item.name }}
                </li>
              </ul>
              <el-table
                :data="queryRangeData"
                style="width: 100%; margin-top: 20px"
                height="230"
                :header-cell-style="patentHeaderStyle"
                :cell-style="patentCellStyle"
              >
                <el-table-column
                  type="index"
                  :label="$t('assessment.SN')"
                  width="50"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="t"
                  align="left"
                  header-align="center"
                  :label="$t('assessment.Name')"
                >
                </el-table-column>
                <el-table-column
                  prop="pn"
                  align="center"
                  :label="$t('assessment.PatentNo')"
                  width="140"
                >
                  <template slot-scope="scope">
                    <router-link
                      :to="{
                        name: 'patentDetails',
                        query: { pn: scope.row.pn, active: 1 }
                      }"
                      tag="p"
                      class="link-p"
                      :title="scope.row.pn"
                      >{{ scope.row.pn }}</router-link
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  prop="score"
                  align="center"
                  width="77"
                  :label="$t('assessment.Score')"
                >
                </el-table-column>
              </el-table>
              <el-pagination
                background
                layout="prev, pager, next"
                :total="evaluateTotal"
                :page-size="evaluatePageSize"
                :current-page.sync="evaluateCurrentPage"
                @current-change="getEvaluateCurrentPage"
                class="el-pagination"
              >
              </el-pagination>
            </v-flex>
          </v-layout>
        </v-card>
      </v-flex>
      <v-flex class="vflex" xs6>
        <!-- 企业技术综合评分 -->
        <v-card class="vcard">
          <v-card-title class="vcard-title"
            ><i></i>{{ $t("assessment.technologyScore2") }}</v-card-title
          >
          <v-layout>
            <v-flex xs12>
              <ul class="evaluation-list">
                <li>
                  <p class="title clearfix">
                    <span>{{ $t("assessment.PatentQuality") }}</span
                    ><span>{{ vprogress1 }}/100</span>
                  </p>
                  <v-progress-linear
                    class="vprogress"
                    height="10"
                    color="#03b38c"
                    background-color="#e6f7f3"
                    v-model="vprogress1"
                  ></v-progress-linear>
                  <p class="footer-tip">{{ $t("assessment.tip1") }}</p>
                </li>
                <li>
                  <p class="title clearfix">
                    <span>{{ $t("assessment.TechnicalValue") }}</span
                    ><span>{{ vprogress2 }}/100</span>
                  </p>
                  <v-progress-linear
                    class="vprogress"
                    height="10"
                    color="#03b38c"
                    background-color="#e6f7f3"
                    v-model="vprogress2"
                  ></v-progress-linear>
                  <p class="footer-tip">{{ $t("assessment.tip2") }}</p>
                </li>
                <li>
                  <p class="title clearfix">
                    <span>{{ $t("assessment.MarketValue") }}</span
                    ><span>{{ vprogress3 }}/100</span>
                  </p>
                  <v-progress-linear
                    class="vprogress"
                    height="10"
                    color="#03b38c"
                    background-color="#e6f7f3"
                    v-model="vprogress3"
                  ></v-progress-linear>
                  <p class="footer-tip">{{ $t("assessment.tip3") }}</p>
                </li>
                <li>
                  <p class="title clearfix">
                    <span>{{ $t("assessment.SocialValue") }}</span
                    ><span>{{ vprogress4 }}/100</span>
                  </p>
                  <v-progress-linear
                    class="vprogress"
                    height="10"
                    color="#03b38c"
                    background-color="#e6f7f3"
                    v-model="vprogress4"
                  ></v-progress-linear>
                  <p class="footer-tip">{{ $t("assessment.tip4") }}</p>
                </li>
              </ul>
            </v-flex>
          </v-layout>
        </v-card>
      </v-flex>
      <!-- 结论 -->
      <Conclusion v-show="false">
        <template v-if="conclusionIndex === 0">
          <p class="conclusion-p">
            与<i>{{ companyName }}</i
            >在技术上相似度较高的国内机构有：<span v-html="conclusionA"></span
            >（相似度前5）；
          </p>
          <!-- <p class="conclusion-p">与<i>{{companyName}}</i>在技术上相似度较高的国外企业有：<span v-html="conclusionA2"></span>（相似度前3）；</p> -->
          <!-- <p class="conclusion-p">与<i>{{companyName}}</i>在产品上相似度较高的企业有：<span v-html="conclusionA3"></span>（相似度前3）；</p> -->
        </template>
        <template v-else-if="conclusionIndex === 1">
          <p class="conclusion-p">
            <i>{{ companyName }}</i
            >目前<span v-html="conclusionB"></span>。
          </p>
        </template>
        <template v-else-if="conclusionIndex === 2">
          <p class="conclusion-p">
            <i>{{ companyName }}</i
            ><span v-html="conclusionC"></span>；
          </p>
          <p v-if="conclusionC2" class="conclusion-p">
            <i>{{ companyName }}</i
            ><span v-html="conclusionC2"></span>；
          </p>
          <p v-if="conclusionC3" class="conclusion-p">
            <i>{{ companyName }}</i
            ><span v-html="conclusionC3"></span>；
          </p>
          <p v-if="conclusionC4" class="conclusion-p">
            <i>{{ companyName }}</i
            ><span v-html="conclusionC4"></span>；
          </p>
          <p v-if="conclusionC5" class="conclusion-p">
            <i>{{ companyName }}</i
            ><span v-html="conclusionC5"></span>；
          </p>
          <p v-if="conclusionC6" class="conclusion-p">
            <i>{{ companyName }}</i
            ><span v-html="conclusionC6"></span>；
          </p>
        </template>
      </Conclusion>
    </v-layout>
  </div>
</template>

<script>
import Ecolors from "@/utils/chartsColors.js";
// import IndustryTable from './IndustryTable'
import Conclusion from "./components/Conclusion";
import { setTimeout } from "timers";
import axios from "axios";
export default {
  components: {
    // IndustryTable,
    Conclusion
  },
  data() {
    return {
      companyName: this.$cookie.get("companyName") || "",
      // 企业主要技术方向
      analysisData: "",
      chartOneData: [],
      chartTechOne: "",
      industryTabs: "",
      // 行业榜单
      cnDataType: "cnCompanySort",
      competingGoodsData: [], // 竞品企业匹配
      // 企业专利概况
      patentCount: {},
      patentCount2: {
        biaozhun: {},
        paper: {},
        chengguo: {}
      },

      patentListItems: [],
      spanArr: [],
      pos: 0,
      patentHeaderStyle: function() {
        return "font-weight: 600; color: #03b38c ;";
      },
      patentCellStyle: function() {
        return "color: #606266";
      },
      // 行业技术水平
      ipcArr: [],
      ipcNumber: 5,
      chartTechTwo: "",
      currentLegendName: "", // 当前选中图例
      // 企业技术综合评分
      intervalArr: [],
      rangeData: [],
      queryRangeData: [], // 选择评分区间数据
      evaluateTotal: 0,
      evaluateCurrentPage: 1,
      evaluateIps: 5,
      evaluatePageSize: 5,
      activeVal: "",
      vprogress1: 0,
      vprogress2: 0,
      vprogress3: 0,
      vprogress4: 0,
      // 当前选中tab
      tabActiveIndex: 1,
      watchCompanyName: "",
      // 结论
      conclusionIndex: 0,
      conclusionA: "",
      conclusionA2: "",
      conclusionA3: "",
      conclusionB: "",
      conclusionC: "",
      conclusionC2: "",
      conclusionC3: "",
      conclusionC4: "",
      conclusionC5: "",
      conclusionC6: "",
      eid: ""
    };
  },
  methods: {
    // 企业主要技术方向
    getChartOneData() {
      this.$get(this.$Url.science.direction, {
        companyName: this.companyName,
        dataType: "patentAnalysis"
      })
        .then(data => {
          if (data.data) {
            this.analysisData = data.data.patentAnalysis;
            for (let i = 0; i < this.analysisData.ipcPie.length; i++) {
              let x = this.analysisData.ipcPie[i].value;
              this.chartOneData.push({
                name: x,
                value: Math.ceil(
                  (this.analysisData.ipcPie[i].num /
                    this.analysisData.ipcPie[i].total) *
                    100
                )
              });
              this.renderChartOne(this.chartOneData);
            }
            // 行业技术水平
            let ipcArr = this.analysisData.businessPie.ipcArr;
            ipcArr = ipcArr.filter(v => v.ipcName.length < 20);
            this.getTechnicalLevel(ipcArr);
            // 企业技术综合评分
            let scoreBetweenNum = this.analysisData.complexEchart
              .scoreBetweenNum;
            this.getEvaluateData(scoreBetweenNum);

            let complexEchart = this.analysisData.complexEchart;
            let complexDetail = complexEchart.complexDetail;
            if (complexDetail.patentScoreavg) {
              // 专利质量
              this.vprogress1 = Number(complexDetail.patentScoreavg.Q);
              // 技术价值
              this.vprogress2 = Number(complexDetail.patentScoreavg.T);
              // 市场价值
              this.vprogress3 = Number(complexDetail.patentScoreavg.M);
              // 社会价值
              this.vprogress4 = Number(complexDetail.patentScoreavg.S);
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    renderChartOne(data) {
      this.chartTechOne = this.$echarts.init(
        document.getElementById("chartTechOne")
      );
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} ({d}%)"
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          top: "20px",
          left: "66%",
          // right: '-10%',
          bottom: "24px",
          itemGap: 20,
          // itemWidth: 6,
          // itemHeight: 6,
          data: data,
          formatter: function(name) {
            return name.length > 10 ? name.slice(0, 10) + "..." : name;
          }
        },
        grid: {
          top: 10
        },
        color: Ecolors.color,
        series: [
          {
            type: "pie",
            name: "企业主要技术方向",
            radius: ["35%", "50%"],
            center: ["34%", "45%"],
            minAngle: 20,
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                formatter: "{d}%"
              }
            },
            labelLine: {
              normal: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                borderWidth: 2,
                borderColor: "#fff"
              }
            },
            data: data
          }
        ]
      };
      this.chartTechOne.setOption(option, true);
      window.addEventListener("resize", () => {
        setTimeout(() => {
          this.chartTechOne.resize();
        }, 400);
      });
    },
    // 竞品企业匹配
    getCompetingGoodsData() {
      this.$get(this.$Url.science.companySort, {
        companyName: this.companyName,
        dataType: "cnCompanySort"
      })
        .then(res => {
          let data = res.data;
          if (data && data.cnCompanySort) {
            data.cnCompanySort.sort((a, b) => {
              return b.companyScore - a.companyScore;
            });

            data.cnCompanySort.forEach(v => {
              let targetCompanyName = v.companyName;
              if (v.companySimInfo) {
                let companySimInfo = JSON.parse(v.companySimInfo);
                if (
                  companySimInfo.explain_type &&
                  companySimInfo.explain_type !== "" &&
                  companySimInfo.explain_info
                ) {
                  let type = companySimInfo.explain_type;
                  let info = JSON.parse(
                    JSON.stringify(companySimInfo.explain_info)
                  );
                  let str = "";
                  switch (type) {
                    case "person":
                      str += "核心人员";
                      break;
                    case "technology":
                      str += "研究方向";
                      break;
                    case "product":
                      str += "产业布局";
                      break;
                    case "scope":
                      str += "业务范围";
                      break;
                  }
                  let str2 = "";
                  if (info instanceof Array) {
                    info.forEach((b, j) => {
                      this.$set(info, j, `"${b}"`);
                    });
                    str2 = info.join("，");
                    v.companySimInfoStr = str + str2 + "相似度极高";
                  } else {
                    let str3 = "";
                    // 如果有A2B
                    if (info.A2B && info.A2B.length > 0) {
                      let personArr = [];
                      info.A2B.forEach(b => {
                        personArr.push(`${b.name_zh}`);
                      });
                      str3 += `${this.companyName}<br/>${str}：${personArr.join(
                        "，"
                      )}<br/><span style="color:#FF6E6E">跳槽到</span>${targetCompanyName}<br/>`;
                    }
                    if (
                      info.A2B &&
                      info.A2B.length > 0 &&
                      info.B2A &&
                      info.B2A.length > 0
                    ) {
                      str3 += `<hr style="margin: 4px 0; border-bottom:1px dashed #fff;"/>`;
                    }
                    // 如果有B2A
                    if (info.B2A && info.B2A.length > 0) {
                      let personArr = [];
                      info.B2A.forEach(b => {
                        personArr.push(`${b.name_zh}`);
                      });
                      str3 += `${targetCompanyName}<br/>${str}：${personArr.join(
                        "，"
                      )}<br/><span style="color:#FF6E6E">跳槽到</span>${
                        this.companyName
                      }`;
                    }
                    v.companySimInfoStr = str3;
                  }
                }
              }
            });
            this.competingGoodsData = data.cnCompanySort;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 企业专利概况
    getCompanyPatentInfo() {
      return this.$get(this.$Url.science.companyPatentInfo, {
        companyName: this.companyName,
        dataType: "patentCount"
      });
    },
    // 企业文献概况
    getCompanyDocumentInfo() {
      return this.$get(this.$Url.EI.document, {
        companyName: this.companyName
      });
    },
    renderEnterprisePatentOverview(patCountData) {
      this.conclusionB = `专利拥有量：<i style='font-style: normal;color: red;'>${
        patCountData.patentNum
      }</i>${this.$t("assessment.Pcs")},
            自主申请：<i style='font-style: normal;color: red;'>${patCountData.applyNum ||
              0}</i>${this.$t("assessment.Pcs")},
            购买专利：<i style='font-style: normal;color: red;'>${patCountData.buyNum ||
              0}</i>${this.$t("assessment.Pcs")},
            失效专利：<i style='font-style: normal;color: red;'>${patCountData.invalidNum ||
              0}</i>${this.$t("assessment.Pcs")},
            布局区域：<i style='font-style: normal;color: red;'>${patCountData.countryNum ||
              0}</i>个,
            被许可专利：<i style='font-style: normal;color: red;'>${patCountData.licenseNum ||
              0}</i>${this.$t("assessment.Pcs")}`;
    },
    // 转出
    getSell() {
      return this.$get(this.$Url.patent.patentLegal, {
        companyName: this.companyName
      });
    },
    // 行业技术水平
    getTechnicalLevel(ipcArr) {
      this.chartTechTwo = this.$echarts.init(
        document.getElementById("chartTechTwo")
      );

      let _ipcNumber = this.ipcNumber;
      let color = Ecolors.color;
      let _ipcArr = JSON.parse(JSON.stringify(ipcArr));
      for (let i in ipcArr) {
        let companyIpcArr = [];
        for (let j in ipcArr[i].companyIpcArr) {
          let obj = ipcArr[i].companyIpcArr[j];
          let key = Object.keys(obj)[0];
          let value = Object.values(obj)[0];
          if (key && key.indexOf("_num") > -1) {
            key = Object.keys(obj)[1];
            value = Object.values(obj)[1];
          }

          if (key !== "virtual" && (value !== 0 || key === this.companyName)) {
            companyIpcArr.push({
              key: key,
              value: value
            });
          }
        }
        this.$set(_ipcArr[i], "companyIpcArr", companyIpcArr);
      }

      let xAxisData = [];
      let seriesDataArr = [];
      // 当前企业的值
      let curData = [];
      // 当前排名第一位的值
      let allData = [];
      //
      let coordData = [];
      for (let i in _ipcArr) {
        xAxisData.push(_ipcArr[i].ipcName);

        f: for (let j in _ipcArr[i].companyIpcArr) {
          let key = _ipcArr[i].companyIpcArr[j].key;
          let value = _ipcArr[i].companyIpcArr[j].value;
          if (key === this.companyName) {
            curData.push(value);
            coordData.push({
              coord: [Number(i), _ipcArr[i].companyIpcArr[0].value],
              value: `${Number(j) + 1}/${_ipcArr[i].companyIpcArr.length}`
            });
            break f;
          }
        }
        // 最大值
        let key = _ipcArr[i].companyIpcArr[0].key;
        let value = _ipcArr[i].companyIpcArr[0].value;
        allData.push({
          name: key,
          value: value
        });
      }
      seriesDataArr = [
        {
          name: "行业最高分",
          type: "bar",
          data: allData,
          smooth: true,
          symbol: "circle",
          symbolSize: 0,
          markPoint: {
            // symbol: 'pin',
            symbolSize: 24,
            itemStyle: {
              color: "transparent"
            },
            label: {
              show: true,
              fontStyle: "normal",
              borderWidth: 0,
              shadowBlur: 0,
              // position: 'top',
              lineHeight: 12,
              color: "#03b38c",
              fontSize: 11
            },
            data: coordData
          },
          itemStyle: {
            normal: {
              barBorderRadius: [2, 2, 0, 0],
              color: "#bef6dc"
            }
          }
        },
        {
          name: this.companyName,
          type: "bar",
          barGap: "-100%",
          data: curData,

          itemStyle: {
            normal: {
              barBorderRadius: [2, 2, 0, 0],
              color: '#03b38c'
            }
          }
        }
      ];
      let lenArr = [];
      for (let i in xAxisData) {
        lenArr.push(xAxisData[i].length);
      }
      let maxLen = Math.max(...lenArr);
      let lcOption = {
        tooltip: {
          confine: true,
          trigger: "axis",
          backgroundColor: "#fff",
          extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
          borderRadius: 0,
          padding: 5,
          textStyle: {
            color: "#000"
          },
          axisPointer: { type: "none" },
          formatter: params => {
            let label = params[0].axisValueLabel;
            let index = 0;
            for (let i in xAxisData) {
              if (xAxisData[i] === label) {
                index = Number(i);
              }
            }
            let dr = coordData[index].value.split("/");
            // let str = `${label}<br/>
            //   ${params[0].marker}${params[0].seriesName}：${params[0].value}<br/>
            //   ${params[1].marker}${params[1].seriesName}：${params[1].value}<br/>
            //   行业排名第${dr[0]}名，共${dr[1]}家`
            // console.log(`${params[0].marker}`)
            let str = `<span style="font-weight:bold;margin-bottom:4px;font-size:14px;">${label}</span><br/>
              <span style="font-size:12px;">${params[1].marker}${params[1].seriesName}：${params[1].value}</span><br/>
              <span style="display:inline-block;margin-right:5px;width:10px;height:10px;"></span><span style="font-size:12px;">当前行业排名第${dr[0]}名</span><br/>
              <span style="font-size:12px;">${params[0].marker}${params[0].seriesName}：${params[0].value}</span><br/>
              <span style="display:inline-block;margin-right:5px;width:10px;height:10px;"></span><span style="font-size:12px;">当前技术领域最相似公司共${dr[1]}家</span>
              
              `;
            return str;
          }
        },
        legend: {
          type: "scroll",
          top: "10",
          left: "5%",
          right: "5%"
        },
        grid: {
          top: "60",
          right: "20",
          bottom: "10",
          containLabel: true
          // bottom: maxLen * 8 + 'px'
        },
        xAxis: {
          type: "category",
          data: xAxisData,
          splitLine: {
            show: false,
            lineStyle: {
              color: "#f0f1f3"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#f0f1f3",
              width: 2
            }
          },
          axisLabel: {
            borderWidth: 30,
            borderColor: "#ffffff",
            interval: 0,
            rotate: 45,
            fontSize: 10,
            lineHeight: 12,
            textStyle: {
              color: "#9e9e9e"
            },
            verticalAlign: "top",
            formatter: function(value) {
              var ret = ""; //拼接加\n返回的类目项
              var maxLength = 10; //每项显示文字个数
              var valLength = value.length; //X轴类目项的文字个数
              var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
              if (rowN > 1) {
                //如果类目项的文字大于3,
                for (var i = 0; i < rowN; i++) {
                  var temp = ""; //每次截取的字符串
                  var start = i * maxLength; //开始截取的位置
                  var end = start + maxLength; //结束截取的位置
                  //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                  temp = value.substring(start, end) + "\n";
                  ret += temp; //凭借最终的字符串
                }
                return ret;
              } else {
                return value;
              }
            }
          }
        },
        yAxis: {
          name: `行\n业\n技\n术\n总\n分`,
          nameLocation: "middle",
          nameTextStyle: {
            padding: [0, 14, 0, 0],
            color: "#7674a3"
          },
          nameRotate: 0,
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              color: "#f0f1f3"
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#f0f1f3",
              width: 2
            }
          },
          axisLabel: {
            textStyle: {
              color: "#9e9e9e"
            }
          }
        },
        dataZoom: [
          {
            id: "dataZoomX",
            type: "inside",
            xAxisIndex: [0],
            filterMode: "filter"
          }
        ],
        barMaxWidth: 20,
        series: seriesDataArr
      };
      this.chartTechTwo.setOption(lcOption);
      // 图例反选
      // this.chartTechTwo.on('legendselectchanged', (obj) => {
      //   const {selected, name} = obj
      //   if (this.currentLegendName !== name) {
      //     Object.keys(selected).forEach(key => {
      //       selected[key] = key === name ? true : false;
      //     });
      //     this.currentLegendName = name
      //   } else {
      //     if(selected[name]===false){
      //       Object.keys(selected).forEach(key => {
      //         selected[key] = true
      //       });
      //       this.currentLegendName = ''
      //     }
      //   }
      //   lcOption.legend.selected = selected;
      //   this.chartTechTwo.setOption(lcOption)
      // })

      window.addEventListener("resize", () => {
        setTimeout(() => {
          this.chartTechTwo.resize();
        }, 400);
      });
      // // conclusionC
      // this.conclusionC += '主要的技术布局方向为'
      // for(let i=0;i<5;i++){
      //   if(seriesDataArr[i]){
      //     this.conclusionC += `<i style='font-style: normal;color: red;'>${seriesDataArr[i].name}</i>`
      //     if(i<4&&seriesDataArr[i+1]){
      //       this.conclusionC += `、`
      //     }
      //   }

      // }
      // this.conclusionC += '（取前5）'
      // if(seriesDataArr[0]){
      //   this.conclusionC2 = `在${seriesDataArr[0].name}技术方向上行业排名<i style='font-style: normal;color: red;'>${seriesDataArr[0].markPoint.data[0].coord[0]+1}</i>`
      // }
      // if(seriesDataArr[1]){
      //   this.conclusionC3 = `在${seriesDataArr[1].name}技术方向上行业排名<i style='font-style: normal;color: red;'>${seriesDataArr[1].markPoint.data[0].coord[0]+1}</i>`
      // }
      // if(seriesDataArr[2]){
      //   this.conclusionC4 = `在${seriesDataArr[2].name}技术方向上行业排名<i style='font-style: normal;color: red;'>${seriesDataArr[2].markPoint.data[0].coord[0]+1}</i>`
      // }
      // if(seriesDataArr[3]){
      //   this.conclusionC5 = `在${seriesDataArr[3].name}技术方向上行业排名<i style='font-style: normal;color: red;'>${seriesDataArr[3].markPoint.data[0].coord[0]+1}</i>`
      // }
      // if(seriesDataArr[4]){
      //   this.conclusionC6 = `在${seriesDataArr[4].name}技术方向上行业排名<i style='font-style: normal;color: red;'>${seriesDataArr[4].markPoint.data[0].coord[0]+1}</i>`
      // }
    },
    // 企业技术综合评分
    getEvaluateData(scoreBetweenNum) {
      let scoreKeys = Object.keys(scoreBetweenNum);
      let maxKey = scoreKeys[scoreKeys.length - 1];
      this.activeVal = Number(maxKey);
      this.$post(this.$Url.science.evaluate, {
        ipi: this.evaluateCurrentPage,
        ips: this.evaluateIps,
        between: this.evaluateCode,
        betweenNum: maxKey,
        companyName: this.companyName
      })
        .then(data => {
          if (data.data) {
            let result = data.data.result;
            this.queryRangeData = result;
            this.evaluateTotal = data.data.total;
            this.getComplexEchart(scoreKeys);
          }
        })
        .catch(err => console.log(err));
    },
    // 企业技术综合评分-获取区间
    getComplexEchart(data) {
      let arr = [];
      for (let i = 0; i < data.length; i++) {
        arr.push(Number(data[i]));
      }
      arr = Array.from(new Set(arr));
      arr = arr.sort((a, b) => {
        return a - b;
      });
      for (let i = 0; i < arr.length; i++) {
        let obj = {
          name: `${arr[i] * 10}-${arr[i] * 10 + 10}`,
          value: arr[i]
        };
        this.intervalArr.push(obj);
      }
    },
    // 企业技术综合评分-选择区间
    queryInterval(val) {
      this.activeVal = val;
      this.$post(this.$Url.science.evaluate, {
        ipi: this.evaluateCurrentPage,
        ips: this.evaluateIps,
        between: this.evaluateCode,
        betweenNum: val,
        companyName: this.companyName
      })
        .then(data => {
          if (data.data) {
            let result = data.data.result;
            this.queryRangeData = result;
            this.evaluateTotal = data.data.total;
          }
        })
        .catch(err => console.log(err));
    },
    // 企业技术综合评分-分页
    getEvaluateCurrentPage(val) {
      this.evaluateCurrentPage = val;
      // this.$get(`${this.$Url.science.evaluate}/${this.evaluateCurrentPage}/${this.evaluateIps}/null/${this.activeVal}/${this.companyName}`)
      this.$post(this.$Url.science.evaluate, {
        ipi: this.evaluateCurrentPage,
        ips: this.evaluateIps,
        between: this.evaluateCode,
        betweenNum: this.activeVal,
        companyName: this.companyName
      })
        .then(data => {
          if (data.data) {
            let result = data.data.result;
            this.queryRangeData = result;
          }
        })
        .catch(err => console.log(err));
    },
    //
    rowspan(data) {
      this.spanArr = [];
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].national === data[i - 1].national) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },
    // 结论
    showConclusion(index) {
      this.conclusionIndex = index;
      this.$Bus.$emit("isShowConclusion", true);
    },
    // 跳转到技术对比
    goTechComparison(scope) {
      this.$router.push({
        name: "technicalComparison",
        query: {
          compareName: scope.row.companyName
        }
      });
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return "borderRight";
      }
    },
    // 监听图表resizew
    watchChartResize() {
      this.$Bus.$on("chartResize", data => {
        if (data.active === 0 || data.active === "0") {
          setTimeout(() => {
            this.chartTechOne.resize();
            this.chartTechTwo.resize();
          }, 0);
        }
      });
    },
    rankingRowClassName({ row, rowIndex }) {
      if (row.companyName === this.$cookie.get("companyName")) {
        return "highlight";
      }
    },
    // 点击企业名称跳转至企业
    handleEnterComp(name) {
      localStorage.setItem(
        "enterpriseBack",
        JSON.stringify({
          name: "EISearchResult",
          query: {
            keyword: "",
            ipi: 1
          }
        })
      );
      let newName = name.replace(/[<em>|</em>]/g, "");
      this.$Bus.$emit("progressBar", newName);
    }
  },
  mounted() {
    this.eid = localStorage.getItem("eid");
    this.getChartOneData();
    // 获取竞品公司匹配
    this.getCompetingGoodsData();
    // 企业专利概况
    axios
      .all([
        this.getCompanyPatentInfo(),
        this.getSell(),
        this.getCompanyDocumentInfo()
      ])
      .then(
        axios.spread((res1, res2, res3) => {
          let data1 = res1.data;
          if (data1) {
            let patCountData = data1;
            (this.patentCount.patentNum = patCountData.patentCount.patentNum), // 专利拥有量
              (this.patentCount.applyNum = patCountData.patentCount.applyNum), // 自主专利
              (this.patentCount.invalidNum =
                patCountData.patentCount.invalidNum), // 失效专利
              (this.patentCount.countryNum =
                patCountData.patentCount.countryNum); // 布局区域
            this.patentCount.buyNum = patCountData.patentCount.buyNum; // 购买
            this.patentCount.outNum = patCountData.patentCount.outNum; // 转出

            let datas =
              patCountData.patentCount && patCountData.patentCount.type;
            var b = [];
            if (datas.length > 0) {
              for (var i = 0; i < datas.length; i++) {
                for (let j = 0; j < datas[i].na.length; j++) {
                  let name = datas[i].cn_name;
                  b.push({
                    national: name, // 专利国家
                    type: datas[i].na[j].name, // 专利类型
                    value1: datas[i].value,
                    apply: datas[i].na[j].value, // 申请
                    valid: datas[i].na[j].valid, // 有效
                    validArr: datas[i].na[j].validArr,
                    valueArr: datas[i].na[j].valueArr
                  });
                }
              }
            }

            this.patentListItems = b;
            this.rowspan(b);
          }

          let data2 = res2.data;
          if (data2) {
            this.patentCount.licenseNum = data2.transferNum; // 被许可专利
          }
          let data3 = res3.data;
          // 标准
          let biaozhunNum = 0;
          if (data3["biaozhun"]) {
            data3["biaozhun"].forEach(v => {
              biaozhunNum += v.doc_count;
            });
          }
          // 论文
          let paperNum = data3["paper"];
          // if (data3["paper"]) {
          //   data3["paper"].forEach(v => {
          //     paperNum += v.doc_count;
          //   });
          // }
          // 成果
          let chengguoNum = 0;
          if (data3["chengguo"]) {
            data3["chengguo"].forEach(v => {
              chengguoNum += v.doc_count;
            });
          }
          let newData = {
            biaozhun: {
              all: biaozhunNum,
              现行: data3["biaozhun"].find(v => v.key === "现行") || {},
              即将实施: data3["biaozhun"].find(v => v.key === "即将实施") || {},
              废止: data3["biaozhun"].find(v => v.key === "废止") || {}
            },
            paper: {
              all: paperNum,
            },
            chengguo: {
              all: chengguoNum,
              成熟应用阶段:
                data3["chengguo"].find(v => v.key === "成熟应用阶段") || {},
              中期阶段: data3["chengguo"].find(v => v.key === "中期阶段") || {},
              初期阶段: data3["chengguo"].find(v => v.key === "初期阶段") || {}
            }
          };
          this.patentCount2 = newData;

          this.renderEnterprisePatentOverview(this.patentCount);
        })
      );

    // 监听跳转到技术对比的Bus
    // this.watchComparison()
    // 监听图表resizew
    this.watchChartResize();
  }
};
</script>

<style lang="scss" scoped>

.flex {
  display: block;
}
.vflex {
  margin-bottom: 20px;
}
.vflex.right {
  margin-right: 15px !important;
}
.vcard {
  width: 100%;
  height: 100%;
}
.vcard-title {
  position: relative;
  padding-top: 20px !important;
  font-size: 14px;
  font-weight: 600;
  color: $mainColor;
}
.vcard-title i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 20px;
  margin-top: -8px;
  background-color: $mainColor;
}
.technical-list {
  width: 100%;
}
.right-icon {
  position: absolute;
  top: 10px;
  right: 0;
  min-width: 70px;
  padding: 0 10px;
  margin-top: 3px;
  margin-right: 0;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  background-color: $mainColor !important;
  color: #fff;
}
.vtab {
  flex: 1;
  font-size: 14px;
}
.vselect {
  margin-left: 30px;
}
/* 行业榜单 */
.industry-vtabs {
  padding-bottom: 20px;
  font-size: 12px;
  color: $mainColor;
}
.vbtn {
  width: 85%;
  min-width: 85%;
  height: 30px;
  border-radius: 4px;
  font-size: 12px;
  color: $mainColor;
  background-color: $hoverColor !important;
}
.vbtn:hover {
  font-weight: 600;
  color: #fff;
  background-color: $mainColor !important;
}
/* 企业专利概况 */
.info1,
.info2,
.info3 {
  position: relative;
  margin-left: 20px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.info1 span,
.info1 span,
.info3 span {
  float: left;
  display: block;
  line-height: 24px;
  margin-right: 20px;
  font-size: 12px;
  color: #7674a3;
}
.info1 span i,
.info2 span i,
.info3 span i {
  font-style: normal;
  font-weight: 600;
  color: $mainColor;
}
.patent-column {
  text-align: center;
  font-size: 12px;
  color: $mainColor;
}
/* 企业技术综合评分 */
.range {
  display: flex;
  width: 100%;
  list-style: none;
  align-items: center;
  justify-items: center;
  padding-left: 0;
}
.range li {
  flex: 1;
  line-height: 40px;
  margin-right: 2px;
  text-align: center;
  font-size: 12px;
  background-color: $hoverColor;
}
.range li:hover {
  color: #fff;
  background-color: $mainColor;
  cursor: pointer;
}
.range li:nth-of-type(1) {
  margin-left: 6px;
}
.range-active {
  font-weight: 600;
  color: #fff;
  background-color: $mainColor !important;
  cursor: pointer;
}
.evaluation-list {
  margin-right: 20px;
  list-style: none;
}
.evaluation-list .title {
  position: relative;
  margin-bottom: 0;
  border-bottom: none;
}
.evaluation-list .title span {
  float: left;
  display: block;
  font-weight: 600;
  font-size: 12px;
  color: $mainColor;
}
.evaluation-list .title span:last-child {
  float: right;
}
.evaluation-list .vprogress {
  height: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 10px;
}

.evaluation-list .footer-tip {
  font-size: 12px;
  color: #7674a3;
}
.conclusion-p {
  position: relative;
}
.conclusion-p i {
  font-style: normal;
  color: $mainColor;
}
.link-p {
  cursor: pointer;
}
.link-p:hover {
  text-decoration: underline;
}
.el-pagination {
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
}
/*企业主要技术方向,行业榜单样式调整*/
.technologyBody .technology {
  width: 55% !important;
  flex-basis: 55% !important;
}
.technologyBody .Ranking {
  width: 45% !important;
  flex-basis: 45% !important;
  max-width: 45% !important;
}
.tip-icon,
.tip-icon2 {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #606266;
}
.tip-icon2 {
  width: 20px;
}
.highcolor {
  color: #528ec3;
}
.highcolor2 {
  color: #84c026;
}
.company-name {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
}
</style>
